<template>
    <view class="u-page">
        <card title="基本案例">
			<u-image
				:showLoading="true"
				:src="src"
				width="80px"
				height="80px"
				@click="click"
			></u-image>
        </card>

        <card title="自定义形状">
			<u-image
				shape="circle"
				:src="src"
				width="80px"
				height="80px"
			></u-image>
        </card>

        <card title="自定义圆角">
			<u-image
				round="4"
				:src="src"
				width="80px"
				height="80px"
			></u-image>
        </card>

        <card title="图片模式(widthFit)">
			<u-image
				:src="src"
				width="80px"
				height="80px"
				mode="widthFit"
			></u-image>
        </card>

        <card title="自定义图片加载插槽">
			<u-image
				:src="src1"
				width="80px"
				height="80px"
				mode="widthFit"
			>
				<template v-slot:loading>
					<u-loading-icon color="red"></u-loading-icon>
				</template>
			</u-image>
        </card>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                src: 'http://uview.d3u.cn/web/static/uview/album/1.jpg',
                src1: '',
            };
        },
        onLoad() {
            setTimeout(() => {
                this.src1 = this.src;
            }, 3000);
        },
        methods: {
            click() {
                console.log('click');
            },
        },
    };
</script>

<style lang="scss"></style>
